<template>
  <div class="template1">
    <div class="leftNav">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
      <el-button type="primary" class="addMenu" plain size="small" @click="departments">部门管理</el-button>
    </div>
    <div class="subject" :style="'width:84%;height:'+(height+120)+'px;padding-top:'+headH+'px'">
      <div class="head" id="head1">
        <div class="tit">
          员工管理
          <span class="add" @click="addPersonnel('add')">添加员工</span>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
            <el-form-item prop="name">
            <el-input
              size="mini"
              v-model="formInline.name"
              placeholder="姓名"
              style="border-right: red"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              size="mini"
              v-model="formInline.phone"
              placeholder="手机号"
              style="border-right: red"
            ></el-input>
          </el-form-item>
          <el-form-item prop="roleId">
            <el-select size="mini" v-model="formInline.roleId" placeholder="职位" clearable>
              <el-option :label="item.name" :value="item.id" v-for="item in $store.state.role"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="type">
            <el-select size="mini" v-model="formInline.type" style="width:100px" placeholder="参与接单" clearable>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="isFullTime">
            <el-select size="mini" v-model="formInline.isFullTime" style="width:80px" placeholder="类型" clearable>
              <el-option label="全职" :value="1"></el-option>
              <el-option label="兼职" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="entryTime" label="入职时间">
            <el-date-picker size='mini' v-model="formInline.entryTime" type="daterange" style="width:205px" range-separator="-"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100% !important">
        <personnelList></personnelList>
      </el-main>
      <el-footer id="foot">
        <el-button type="info" plain size="small" @click="setPermission">权限设置</el-button>
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" @size-change="sizeChange" @current-change="page" :total="total" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </div>
    <addPersonnel></addPersonnel>
    <editPassword></editPassword>
    <department></department>
    <setPermission></setPermission>
    <addDep></addDep>
  </div>
</template>
<script>

import personnelList from "./personnelList.vue"; //员工列表
import addPersonnel from "./addPersonnel.vue";  //添加编辑员工
import editPassword from "./editPassword.vue"; //修改密码
import department from "./department.vue";    //部门管理
import setPermission from "./setPermission.vue"; //权限设置
import addDep from "./addDep.vue"; //添加编辑部门

import {setTime,trim,depList,selectArea} from "../../assets/session.js";
import { request } from "../../assets/request.js";
export default { 
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      height: "",
      formInline: {
        name: "",
        phone: "",
        position: "",
        entryTime: "",
        type:"", //是否参与接单
        roleId:'', 
        isFullTime:'',//是否参与接单
      },
      total:0,
      selectObj:{
        size:20,
        page:1,
      },
      headH:'',
      selList:[], //列表选中的员工
    };
  },
  created(){
    this.department()
    this.role() //职位查询
    let that=this
    selectArea(that)   //查询城市区域
    this.$root.$on('selectList',(data)=>{
      this.total=data.total
    })
    this.$root.$on('saveDep',data=>{
      this.department()
    })
    this.$root.$on('selList',data=>{ //组件之间传值  将选中列表传过来 用于判断是否要设之权限
      this.selList=data
    })
  },
  methods: {
    handleNodeClick(data) {
      let obj=this.selectObj
      obj.page=1
      obj.deportmentId=data.id
      this.$root.$emit('search',obj)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() { //搜索
      let obj=this.selectObj
      let formInline=this.formInline
      obj.realName=trim(formInline.name);
      obj.isFullTime=formInline.isFullTime
      if(formInline.entryTime[0] && formInline.entryTime[1]){
        obj.joinBegin=setTime(formInline.entryTime[0])
        obj.joinEnd=setTime(formInline.entryTime[1])
      }else{
        obj.joinBegin=''
        obj.joinEnd=''
      }
      obj.phone=trim(formInline.phone);
      if(formInline.roleId){
        obj.roleId=parseInt(formInline.roleId)
      }else{
        obj.roleId=''
      }
      obj.phone=trim(formInline.phone);
      this.$root.$emit('search',obj)
    },
    addPersonnel(type) { //添加员工
      if(this.$store.state.department[0]){
        this.department()
      }
      if(this.$store.state.role[0]){
        this.role()
      }
      this.$root.$emit("addPersonnel", type);
    },
    editPassword() { //修改密码
      this.$root.$emit("editPersonnel", "no");
    },
    setPermission(){ //权限设置
      if(this.selList[0]){
        this.$root.$emit("setPermission", 'group')
      }else{
        this.$message({
            type: "info",
            message: "请先选择员工！"
        });
      }
      
    },
    departments(){ //打开部门管理列表
        if(this.$store.state.department[0]){ //判断部门管理是否有存储
          this.$root.$emit("department", "no");
        }else{
          this.department()
          this.$root.$emit("department", "no");
        }
    },
    sizeChange(e){   //每页多少条
      let obj=this.selectObj
      obj.page=1
      obj.size=e
      this.$root.$emit('search',obj)
    },
    page(e){ //第几页
      let obj=this.selectObj;
      obj.page=e
      this.$root.$emit('search',obj)
    },
    selectList(){
      this.$root.$emit('selectList','no')
    },
    department(){ //查询所有部门
      let url='department/all'
      let that=this
      request.ajaxGet({
        url,
        that,
        fn(res){
          console.log(res)
          res.sort((a,b)=>a.id-b.id)
          let arr=depList(res)
          that.$store.state.department=arr
          that.data=arr
        }
      })
    },
    
    role(){ //职位查询
      let url = "role/all";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          that.$store.state.role=res
        }
      })
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    this.height = parseInt(height) - 182;

    let headH = document.getElementById("head1").offsetHeight;
    
    this.headH=headH
  },
  components: {
    personnelList, //员工列表
    addPersonnel, //添加编辑员工
    editPassword, //修改密码
    department, //部门管理
    setPermission, //权限设置
    addDep,//添加编辑部门
  }
};
</script>

<style lang="less" scoped>
.template1 {
    text-align: left;
    .head{
        .el-input{
            width:120px;
        }
        .el-select{
            width:150px;
        }
    }
}
</style>
<style scoped lang="less">
@import "../template1.less";
</style>
